<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>简易AI问答页面</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      height: 100vh;
      background: #f5f6fa;
    }
    /* 左边对话列表 */
    .sidebar {
      width: 250px;
      background: #2f3640;
      color: white;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .sidebar h2 {
      text-align: center;
      margin-bottom: 10px;
      border-bottom: 1px solid #444;
      padding-bottom: 10px;
    }
    .session {
      padding: 8px;
      margin: 4px 0;
      background: #353b48;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .session:hover {
      background: #40739e;
    }
    /* 主聊天区域 */
    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .chat-box {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
    }
    .message {
      margin-bottom: 15px;
      line-height: 1.4;
      word-break: break-word;
    }
    .user {
      text-align: right;
    }
    .user span {
      background: #4cd137;
      color: white;
      padding: 8px 12px;
      border-radius: 12px;
      display: inline-block;
      max-width: 70%;
    }
    .assistant span {
      background: #dcdde1;
      padding: 8px 12px;
      border-radius: 12px;
      display: inline-block;
      max-width: 70%;
    }
    /* 输入区 */
    .input-area {
      display: flex;
      padding: 10px;
      background: white;
      border-top: 1px solid #ccc;
    }
    .input-area input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
    }
    .input-area button {
      margin-left: 10px;
      padding: 10px 16px;
      background: #0097e6;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .input-area button:hover {
      background: #40739e;
    }
  </style>
</head>
<body>
<!-- 左边栏 -->
<div class="sidebar">
  <h2>对话列表</h2>
  <div class="session" onclick="switchSession(1)">对话 1</div>
  <div class="session" onclick="switchSession(2)">对话 2</div>
  <div class="session" onclick="switchSession(3)">对话 3</div>
</div>

<!-- 主聊天区 -->
<div class="chat-container">
  <div id="chatBox" class="chat-box"></div>

  <div class="input-area">
    <input type="text" id="userInput" placeholder="请输入你的问题..." />
    <button onclick="sendMessage()">发送</button>
  </div>
</div>

<script>
  const chatBox = document.getElementById("chatBox");
  const input = document.getElementById("userInput");

  // 模拟AI回答
  function fakeAIResponse(question) {
    const answers = [
      "这是一个好问题！",
      "让我想想……也许你可以这样做。",
      "我不太确定，但我们可以一起研究。",
      "听起来很有意思！"
    ];
    return answers[Math.floor(Math.random() * answers.length)];
  }

  // 发送消息
  function sendMessage() {
    const text = input.value.trim();
    if (!text) return;
    appendMessage("user", text);
    input.value = "";
    setTimeout(() => {
      const reply = fakeAIResponse(text);
      appendMessage("assistant", reply);
    }, 600);
  }

  // 添加消息到聊天框
  function appendMessage(role, content) {
    const div = document.createElement("div");
    div.className = "message " + role;
    div.innerHTML = `<span>${content}</span>`;
    chatBox.appendChild(div);
    chatBox.scrollTop = chatBox.scrollHeight;
  }

  // 切换对话（仅演示）
  function switchSession(id) {
    chatBox.innerHTML = "";
    appendMessage("assistant", "已切换到对话 " + id);
  }
</script>
</body>
</html>
